<template>
  <view class="router-view bcl-active pt-20">
    <view v-if="!successModal">
      <view class="bcl-white">
        <view class="border border-bottom">
          <view class="uni-input bcl-white uni-input-tel uni-input-none-border">
            <input type="number" placeholder="请输入手机号" v-model="tel" />
          </view>
        </view>

        <view>
          <view
            class="uni-input bcl-white uni-input-code uni-input-none-border"
          >
            <input type="number" placeholder="请输入验证码" v-model="code" />

            <!-- 发送验证码按钮 -->
            <view
              class="send-btn cl-main pointer"
              :disabled="counting"
              @tap="sendSmsCode"
              >{{ countText }}</view
            >
          </view>
        </view>
      </view>

      <view class="container mt-50">
        <button class="uni-button uni-button-lg uni-button-full" @tap="bindTel">
          绑定
        </button>
      </view>
    </view>

    <!-- 绑定成功 -->
    <view class="success-dialog">
      <uni-dialog v-model="successModal" :show-btn="false" :showClose="false">
        <view slot="content">
          <view class="text-center middle">
            <text class="icon icon-success cl-main fz-24"></text>
            <text class="bold fz-16">您已完成手机绑定</text>
          </view>

          <view
            class="bcl-active p-30 cl-main text-center mt-30 mb-20 bind-content radius"
          >
            <view class="bind-tag">绑定的手机</view>
            <text class="bold">{{ tel }}</text>
          </view>

          <view class="text-tip">
            <view class="mb-5">手机认证成功后，您可以享有以下服务</view>
            <view class="cl-second">您可以使用手机号码登录网站</view>
            <view class="cl-second"
              >绑定手机能够随时获得重要信息提醒，例如支付/提现/选稿/交稿等</view
            >
            <view class="cl-second">可以通过手机短信快速找回您的登录密码</view>
          </view>
        </view>
      </uni-dialog>
    </view>
  </view>
</template>

<script>
import { phoneStatus, sendSmsCode, telAuth } from "@/apis/user";
import uniDialog from "@/components/dialog";
import regexp from "@/utils/regexp";

export default {
  components: {
    uniDialog,
  },

  data() {
    return {
      successModal: false,
      tel: "",
      code: "",
      count: 30, // 验证码总倒计时数
      counting: false, // 正在倒计时
    };
  },

  onLoad() {
    this.getAuthStatus();
  },

  methods: {
    /**
     * 获取手机验证状态
     */
    async getAuthStatus() {
      let { code, data } = await phoneStatus();
      if (code === 200) {
        if (data.mobile) {
          this.successModal = true;
          this.tel = data.mobile;
        }
      }
    },

    /*
     * 发送手机验证码
     */
    async sendSmsCode() {
      if (this.counting) return false;
      if (!regexp.tel.test(this.tel)) return this.$toast("请输入正确的手机号");

      let params = {
        phone: this.tel,
        type: 3,
      };

      this.sending = true;

      let { code, data } = await sendSmsCode(params);

      if (code == 200) {
        this.$toast("发送成功");
        this.countDown();
      }
    },

    /*
     * 验证码倒计时
     */
    countDown() {
      let count = this.count;
      this.counting = true;

      let interval = setInterval(() => {
        this.count -= 1;

        // 倒计时结束
        if (this.count == 0) {
          this.counting = false;
          this.count = count;
          clearInterval(interval);
        }
      }, 1000);
    },

    /**
     * 绑定手机
     */
    async bindTel() {
      if (!regexp.tel.test(this.tel)) return this.$toast("请输入正确的手机号");
      if (!this.code) return this.$toast("请输入验证码");

      let params = {
        mobile: this.tel,
        code: this.code,
      };

      let { code, data } = await telAuth(params);
      if (code === 200 && data.status === 1) this.successModal = true;
    },
  },

  computed: {
    countText() {
      if (!this.counting) {
        return "获取验证码";
      } else {
        return `${this.count}s后重新获取`;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  .uni-input {
    margin-bottom: 0;
  }

  .bind-content {
    position: relative;

    .bind-tag {
      width: 200upx;
      height: 60upx;
      line-height: 60upx;
      position: absolute;
      left: 0;
      top: 0;
      transform: translateY(-50%);
      background: linear-gradient(to bottom, $color-warning, $color-danger 60%);
      color: $color-white;
      border-radius: 20upx 0 20upx 0;
    }
  }
}
</style>
